<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="账号">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
          </el-form>
          <el-form ref="form" :model="form" label-width="80px" :inline="true">
            <el-form-item label="付款">
              <el-select v-model="form.isPayment" placeholder="请选择是否付款">
                <el-option label="已付款" value="1"></el-option>
                <el-option label="未付款" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="安排">
              <el-select v-model="form.isDeal" placeholder="请选择是否安排医生">
                <el-option label="已安排" value="1"></el-option>
                <el-option label="未安排" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="反馈">
              <el-select v-model="form.isFeedback" placeholder="请选择是否反馈">
                <el-option label="已反馈" value="1"></el-option>
                <el-option label="未反馈" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <div class="btn">
            <el-button type="primary" @click="init(currentPag)" icon="el-icon-search">搜索</el-button>
          </div>
          <div class="btn">
            <el-button type="info" @click="refresh" icon="el-icon-refresh-right">重置</el-button>
          </div>
        </div>
      </div>
      <div class="text item">
        <el-table :data="orderList" border style="width: 100%;" ref="multipleTable" v-loading="loading">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="id" label="ID" width="180">
          </el-table-column>
          <el-table-column prop="username" label="账号" width="150">
          </el-table-column>
          <el-table-column prop="name" label="昵称" width="150">
          </el-table-column>
          <el-table-column prop="phone" label="联系方式" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="350">
          </el-table-column>
          <el-table-column prop="note" label="备注" width="200">
          </el-table-column>
          <el-table-column prop="serviceName" label="服务名称" width="150">
          </el-table-column>
          <el-table-column prop="homeServiceFee" label="上门费用" width="100">
          </el-table-column>
          <el-table-column prop="operatingFee" label="服务费用" width="100">
          </el-table-column>
          <el-table-column prop="totalFee" label="总费用" width="100">
          </el-table-column>
          <el-table-column prop="status" label="是否付款" width="80">
            <template slot-scope="scope">
              <el-tag type="success" v-show="scope.row.isPayment == 1">已付款</el-tag>
              <el-tag type="danger" v-show="scope.row.isPayment == 2">未付款</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="是否安排" width="80">
            <template slot-scope="scope">
              <el-tag type="success" v-show="scope.row.isDeal == 1">已安排</el-tag>
              <el-tag type="danger" v-show="scope.row.isDeal == 2">未安排</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="是否反馈" width="80">
            <template slot-scope="scope">
              <el-tag type="success" v-show="scope.row.isFeedback == 1">已反馈</el-tag>
              <el-tag type="danger" v-show="scope.row.isFeedback == 2">未反馈</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="80">
            <template slot-scope="scope">
              <el-tag type="success" v-show="scope.row.status == 1">正常</el-tag>
              <el-tag type="danger" v-show="scope.row.status == 2">禁用</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="totalPage" :page-size="pageSize"
          @current-change="currentChange">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "OrderList",
  data() {
    return {
      // 是否加载
      loading: false,
      // 多选数据
      multipleSelection: [],
      // 当前页数
      currentPag: 1,
      // 每页大小
      pageSize: 10,
      // 总页数
      totalPage: 0,
      // 表单
      form: {
        username: "",
        isPayment: null,
        isDeal: null,
        isFeedback: null
      }
    }
  },
  mounted() {
    this.init(this.currentPag)
  },
  methods: {
    async init(currentPag) {
      this.loading = true
      let res = await this.$store.dispatch("getOrderList", {
        currentPag: currentPag,
        pageSize: this.pageSize,
        isDeal: this.form.isDeal,
        isPayment: this.form.isPayment,
        isFeedback: this.form.isFeedback,
        username: this.form.username
      })
      if (res.success) {
        this.totalPage = parseInt(res.data.totalPag)
        this.currentPag = parseInt(res.data.currentPag)
        this.pageSize = parseInt(res.data.pageSize)
        this.loading = false
      }
      else this.$myfun.resError(res)
    },
    // 更换页数
    currentChange(pag) {
      this.init(pag)
    },
    // 重置
    refresh() {
      let newObj = {}
      this.form = newObj
    }
  },
  computed: {
    orderList() {
      return this.$store.state.order.orderList
    }
  }
}
</script>

<style scoped>
.clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination {
  padding: 20px 0 10px 0;
  text-align: center;
}

.btn {
  margin: 5px 0 5px 0;
}
</style>